<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>选项卡</title>
    <link rel="stylesheet" href="./tabs.css" />
  </head>
  <body>
    <div class="tabs">
      <!-- 选项卡标题 -->
      <ul class="tab-header">
        <li class="active">前端开发</li>
        <li>UI/UE设计</li>
        <li>Python开发</li>
      </ul>
      <!-- 选项卡内容 -->
      <ul class="tab-content">
        <li class="show">
          前端即网站前台部分，运行在PC端，移动端等浏览器上展现给用户浏览的网页。
        </li>
        <li>UI设置为产品的“脸面”</li>
        <li>Python是一个面向对象的解释型高级编程语言</li>
      </ul>
    </div>
  </body>
  <script>
    var tHeadLis = document
      .getElementsByClassName("tab-header")[0]
      .getElementsByTagName("li");
    var tContentLis = document
      .getElementsByClassName("tab-content")[0]
      .getElementsByTagName("li");

    // 此做法不需要在li标签内绑定事件
    // (function () {
      // 通过for循环在li标签上绑定单击和鼠标经过事件
      for (var i = 0, len = tHeadLis.length; i < len; i++) {
        // tHeadLis[i].onmouseenter = showTab;
        tHeadLis[i].onclick = showTab;
        //注意：不是函数调用不能加()即showTab()会执行函数
        //   此处的showTab相当于是onclick的回调函数，不能使用showTab()
      }
    // })();

    // 因为直接在事件的回调函数中无法拿到下标i，
    // 因此在事件的回调函数中再次遍历通过判断与事件的实例化对象相等时获取到下标
    function showTab() {
      for (var i = 0, len = tHeadLis.length; i < len; i++) {
        if (tHeadLis[i] == this) {
          //this为当前触发onmouseenter的实例化对象
          tHeadLis[i].className = "active";
          tContentLis[i].className = "show";
        } else {
          tHeadLis[i].className = "";
          tContentLis[i].className = "";
        }
      }
    }
  </script>
</html>
